<template>
    <div style="padding: 16px;">
        <div class="circular-clip"></div>

        <div class="elliptical-clip"></div>

        <div class="polygon-clip"></div>

        <svg width="0" height="0">
            <defs>
                <clipPath id="myClipPath">
                    <path d="M0 0 L100 0 L100 100 C150 150 200 100 200 100 L200 200 Z">
                    </path>
                </clipPath>
            </defs>
        </svg>

        <div class="svg-path-clip"></div>

        <div>绘制数字</div>
        <div>
            <span class="number num0"></span>
            <span class="number num1"></span>
            <span class="number num2"></span>
            <span class="number num3"></span>
            <span class="number num4"></span>
            <span class="number num5"></span>
            <span class="number num6"></span>
            <span class="number num7"></span>
            <span class="number num8"></span>
            <span class="number num9"></span>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const height = ref(0)
</script>

<style scoped>
.circular-clip {
    width: 50px;
    height: 50px;
    background-color: skyblue;
    clip-path: circle(50% at 50% 50%);
}

.elliptical-clip {
    width: 100px;
    height: 50px;
    background-color: lightgreen;
    clip-path: ellipse(70% 50% at 50% 50%);
}

.polygon-clip {
    width: 100px;
    height: 100px;
    background-color: orange;
    clip-path: polygon(25px 0, 175px 0, 200px 200px, 0 200px);
}

.svg-path-clip {
    width: 100px;
    height: 50px;
    background-color: purple;
    clip-path: url(#myClipPath);
}

.number {
    display: inline-flex;
    line-height: 1;
    -webkit-text-fill-color: transparent;
    font-family: system-ui;
    font-weight: bold;
    position: relative;
    overflow: hidden;
    font-size: 40px;
    margin-left: 10px;
}
.number:empty::after {
    content: '0';
}

.number::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: currentColor;
}

.num0::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 100%, 60% 20%, 40% 20%, 40% 80%, calc(60% - .01px) 80%, calc(60% - .01px) 100%, 0% 100%);
}
.num1 {
    text-indent: -.25em;
}
.num2::before,
.num5::before {
    clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 60%, 50% 80%, 100% 80%, 100% 100%, 0 100%, 0% 40%, 50% 40%, 50% 20%, 0% 20%);
}
.num3::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%, 0% 80%, 50% 80%, 50% 60%, 0% 60%, 0% 40%, 50% 40%, 50% 20%, 0% 20%);
}
.num4::before {
    clip-path: polygon(0 0, 40% 0, 40% 50%, calc(100% - 40%) 50%, calc(100% - 40%) 0%, 100% 0%, 100% 100%, calc(100% - 40%) 100%, calc(100% - 40%) 70%, 0% 70%);
}
.num5::before {
    transform: scaleX(-1);
}
.num6::before,
.num9::before {
    clip-path: polygon(0% 0%, 100% 0%, 100% 20%, calc(40% - .01px) 20%, calc(40% - .01px) 80%, calc(100% - 40%) 80%, calc(100% - 40%) 60%, 40% 60%, 40% 40%, 100% 40%, 100% 100%, 0% 100%);
}
.num7::before {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%, 50% 20%, 0% 20%);
}
.num8::before {
    clip-path: polygon(0% 0%, calc(40% - .01px) 0%, calc(40% - .01px) 40%, 60% 40%, 60% 20%, 40% 20%, 40% 0%, 100% 0%, 100% 100%, 40% 100%, 40% 80%, 60% 80%, 60% 60%, calc(40% - .01px) 60%, calc(40% - .01px) 100%, 0% 100%);
}
.num9::before {
    transform: scale(-1);
}

@supports not (inset: 0) {
    .number::before {
        left: 0; right: 0; top: 0; bottom: 0;
    }
}
</style>